<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="请求管理"></dy-panel-header>
          <el-row>
            <el-col :span="24">
              <dy-panel-body>
                <el-row>
                  <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="请求类型">
                      <el-select placeholder="请选择请求类型" v-model="queryParam.requestMethod">
                        <el-option label="全部" value></el-option>
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="关键字">
                      <el-input
                        @change="doSearchList"
                        clearable
                        placeholder="请输入关键字查询"
                        v-model="queryParam.searchKey"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="doSearchList" type="primary">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
                <el-row>
                  <el-button :disabled="!operateBtn.addBtn" @click="onAddBtnEvent" type="primary">新增</el-button>
                  <el-button
                    :disabled="!operateBtn.editBtn"
                    @click="onEditBtnEvent"
                    type="success"
                  >修改
                  </el-button>
                  <el-button :disabled="!operateBtn.delBtn" @click="onDelBtnEvent" type="danger">删除</el-button>
                </el-row>
              </dy-panel-body>
              <dy-panel-body v-loading="loading">
                <el-table
                  :data="tableList"
                  @selection-change="onSelectRowEvent"
                  @sort-change="onSortTableEvent"
                  border
                  style="width: 100%;text-align: center"
                >
                  <el-table-column
                    align="center"
                    label="序号"
                    prop="date"
                    type="selection"
                    width="30"
                  ></el-table-column>
                  <el-table-column align="center" label="请求方法" prop="requestMethod" width="80"></el-table-column>
                  <el-table-column align="center" label="请求URL" prop="requestUrl">

                  </el-table-column>
                  <el-table-column align="center" label="映射类型" prop="mappingType">

                  </el-table-column>
                  <el-table-column align="center" label="目标地址" prop="target">

                  </el-table-column>
                  <el-table-column align="center" label="模板" prop="requestTpl"></el-table-column>

                  <el-table-column align="center" label="静态化" prop="pageReWrite" width="80">

                  </el-table-column>

                  <el-table-column align="center" label="创建时间" prop="createTime" width="140"></el-table-column>
                  <el-table-column align="center" label="更新时间" prop="updateTime" width="140"></el-table-column>
                  <el-table-column label="操作" prop="id" width="200">
                    <template slot-scope="scope">
                      <el-link
                        @click="onEditRowEvent(false,scope.row)"
                        style="margin-right: 10px"
                        type="primary"
                      >编辑
                      </el-link>
                      <el-link
                        @click="tabJump(scope.row)"
                        style="margin-right: 10px"
                        type="primary"
                      >绑定数据
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <dy-pagination
                    :current-page.sync="queryParam.currentPage"
                    :page-size.sync="queryParam.pageSize"
                    :total="tableTotal"
                    @click="doSearchList"
                  ></dy-pagination>
                </div>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
    <el-row>
      <dy-modal
        :form-key="editModal.formKey"
        :read-only="editModal.readOnly"
        :title="editModal.title"
        :visible.sync="editModal.visible"
        v-if="editModal.visible"
        v-on:close="onRefresh"
        width="60%"
      >
        <cms-tb-request-mapping-update
          :data="editModal.data"
          :form-key="editModal.formKey"
          :treeList="treeList"
        ></cms-tb-request-mapping-update>
      </dy-modal>
    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import cmsTbRequestMappingApi from '@/apis/cmsApp/cmsTbRequestMappingApi.js'
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import CmsTbRequestMappingUpdate from './CmsTbRequestMappingUpdate'

  export default {
    name: 'CmsTbRequestMappingList',
    components: {
      CmsTbRequestMappingUpdate,
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      DyPagination
    },
    data () {
      return {
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'CmsTbRequestMappingList',
          readOnly: false,
          data: {},
          visible: false
        },
        bindModal: {
          formKey: 'CmsTbRequestMappingList',
          readOnly: true,
          data: {},
          visible: false
        },
        inputCaseModal: {
          inputCaseDialogVisible: false,
          inputCaseDialogText: '',
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: false,
          importBtn: true,
          exportBtn: true
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        roleList: [],
        treeFilter: '',
        treeList: [],
        treeProps: {
          children: 'children',
          label: 'dictName'
        },
        tableTotal: 0,
        tableList: []
      }
    },
    created () {
      /**
       * 执行列表查询
       * */
      this.doSearchList()
    },

    methods: {
      /**
       * 编辑按钮事件处理
       */
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.title = '产品编辑'
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      /**
       * 编辑按钮事件处理
       */
      onBindBtnEvent (readOnly, data) {
        // this.bindModal.title = `绑定数据模型`
        // this.bindModal.readOnly = true
        // this.bindModal.data = this.cloneDeep(data)
        // this.bindModal.visible = true
        this.tab
      },
      tabJump (row) {
        // this.jump(`/pages/dpsApp/flowEditor/flowEditor`, `${row.flowName}流程编辑`, row,`${row.id}`)
        this.jump(`/pages/cmsApp/CmsTbRequestMapping/CmsTbRequestMappingBindDataSourceList?id=${row.id}`, `流程编辑`, row)
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = null
        this.editModal.visible = true
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 删除按钮
       * */
      onDelBtnEvent () {
        this.$confirm('您确认要删除选中的记录么？', '删除警告', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            let ids = []
            console.log(this.selectRows)
            for (let row of this.selectRows) {
              ids.push(row.id)
            }
            this.doDeleteList(ids)
          })
          .catch(action => {
            console.log(action)
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      },
      /**
       * 部门筛选事件处理
       * @param value
       * @param data
       * @returns {boolean}
       */
      onTreeFilterNodeEvent (value, data) {
        if (!value) return true
        console.log(value)
        return data.typeName.indexOf(value) !== -1
      },
      /**
       * 部门选择事件处理
       * @param data
       * @param node
       * @param array
       */
      onSelectTreeEvent (data, node, array) {
        if (data.root) {
          this.queryParam.fkDatasourceTypeCode = ''
        } else {
          this.queryParam.fkDatasourceTypeCode = data.dictCode
        }
        this.doSearchList()
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
        if (this.selectRows.length >= 1) {
          this.operateBtn.delBtn = true
        } else {
          this.operateBtn.delBtn = false
        }
      },

      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      onEditInputCaseEvent (row) {
        this.inputCaseModal.inputCaseDialogVisible = true
        this.inputCaseModal.inputCaseDialogText = JSON.stringify(row.inputCase)
        this.inputCaseModal.outputCaseDialogText = JSON.stringify(row.outputCase)
        this.inputCaseModal.oldOutputCaseDialogText = JSON.stringify(row.oldOutputCase)

      },
      onRefresh (isRefresh) {
        if (isRefresh) {
          this.doSearchList()
        }
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        cmsTbRequestMappingApi.selectList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
            this.loading = false
          }, 200)
        }).catch(msg => {
          console.log(msg)
        })
      },
      doDeleteList (ids) {
        let data = {ids: ids}
        cmsTbRequestMappingApi.deleteListService(data).then(msg => {
          this.onRefresh(true)
        })
      }
    },
    computed: {},
    watch: {
      treeFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
